<template>
  <view class="margin-box">
    <block v-for="(item, index) in contactsList" :key="index">
      <delSlideLeft :item="item" @delItem="delItem">
        <view class="chose-box">
          <view @click="onChooseSwitch(item)">
            <img
              class="chose-icon"
              :src="
                item.selected
                  ? 'https://vtrip-sfile.oss-cn-shenzhen.aliyuncs.com/h5AndMini/2023-09-14/icon_checked.png'
                  : 'https://vtrip-sfile.oss-cn-shenzhen.aliyuncs.com/h5AndMini/2023-6-12/ai-icon-2.png'
              "
            />
          </view>
          <view class="info-box">
            <view class="content-box">
              <text class="name">{{ item.realName }}</text
              ><text class="sex">{{ item.sex }}</text>
            </view>
            <block v-if="item.contactsCertificateResponses.length > 0">
              <view
                class="content-box"
                v-for="(
                  cardItem, cardIndex
                ) in item.contactsCertificateResponses"
                :key="cardIndex"
              >
                <text class="title">{{ cardItem.cardType }}</text
                ><text class="content">{{ cardItem.cardNum }}</text>
              </view>
            </block>
            <view class="content-box">
              <text class="title">手机号</text
              ><text class="content">{{ item.phone }}</text>
            </view>
            <view
              class="content-box"
              v-if="item.contactsCertificateResponses.length <= 0"
            >
              <img
                class="title-icon"
                src="https://vtrip-sfile.oss-cn-shenzhen.aliyuncs.com/h5AndMini/2023-6-12/ai-icon-3.png"
                alt=""
                srcset=""
              />
              <text class="content-error">请补充出行人的证件信息</text>
            </view>
          </view>
          <view class="change-icon"></view>
        </view>
      </delSlideLeft>
    </block>
  </view>
</template>

<script>
import delSlideLeft from "../ay-operate/index.vue";
import { Events } from "../../utils/constants.js";
export default {
  components: {
    delSlideLeft,
  },
  data() {
    return {
      contactsList: [],
      maxCount: 0,
      checkedTraveler: [],
      delShow: false,
    };
  },
  methods: {
    init(data) {
      console.log("data", data);
      this.checkedTraveler = JSON.parse(data.checkedTraveler);
      this.maxCount = data.maxCount;
      this.getContactsList();
    },
    //获取联系人列表
    async getContactsList() {
      let res = await this.$aiRequest({
        url: "/app/my/contacts/appContactsList",
        method: "POST",
        params: {},
      });
      if (res.success) {
        this.contactsList = [];
        const data = res.data;
        data.forEach((item) => {
          if (
            this.checkedTraveler.length &&
            this.checkedTraveler.includes(item.contactsId)
          ) {
            item.selected = true;
          } else {
            item.selected = false;
          }
        });
        this.contactsList = data;
        this.$emit("moreCallBack", {
          type: true,
        });
      }
    },
    //确认选择
    onSave() {
      const checkedData = this.contactsList.filter((item) => {
        return item.selected == true;
      });
      if (checkedData.length > this.maxCount) {
        uni.showToast({
          title: `您只需选择${this.maxCount}个出行人`,
          icon: "none",
          duration: 3000,
        });
        return;
      }
      uni.$emit(Events.chooseTraveler, checkedData);
      this.$emit("moreCallBack", {
        type: false,
        data: checkedData,
      });
    },
    onChooseSwitch(item) {
      item.selected = !item.selected;
      if (item.selected) {
        this.checkedTraveler = [...this.checkedTraveler, item.contactsId];
        console.log("选中", this.checkedTraveler);
      } else {
        const array = [...this.checkedTraveler];
        const findIndex = array.indexOf(item.contactsId);
        if (findIndex !== -1) {
          array.splice(findIndex, 1);
          this.checkedTraveler = array;
        }
      }
    },
    delItem(val) {
      console.log("val", val);
      let that = this
      let item = val.item
      uni.showModal({
        title: "提示",
        content: "是否删除该出行人信息？",
        success: function (res) {
          if (res.confirm) {
            console.log("用户点击确定");
            that.handlerDel(item)
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    async handlerDel(item) {
      let params = {
        contactId: item.contactsId,
      };
      console.log(params, "params");
      let res = await this.$aiRequest({
        url: "/app/my/contacts/delete",
        method: "POST",
        params,
      });
      if (res.success) {
        this.getContactsList();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.margin-box {
  width: 710rpx;

  /* #ifdef H5 */
  height: 100vh;
  /* #endif */
  margin: 0 auto;
}
.chose-box {
  background: #ffffff;
  border-radius: 30rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  .chose-icon {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }
  .change-icon {
    width: 36rpx;
    height: 35rpx;
  }
  .content-box {
    display: flex;
    align-items: center;
    flex: 1;
    margin: 10rpx 0;
    .title {
      color: #999999;
      font-size: 28rpx;
      padding-right: 40rpx;
    }
    .content {
      color: #999999;
      font-size: 28rpx;
    }
    .name {
      font-size: 32rpx;
      color: #4d566a;
      padding-right: 20rpx;
    }
    .sex {
      color: #999999;
      font-size: 28rpx;
    }
    .title-icon {
      width: 26rpx;
      height: 26rpx;
      margin-right: 16rpx;
    }
    .content-error {
      font-size: 24rpx;
      color: #d81e06;
    }
  }
}
</style>